<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { queryAllCartsByUid, removeCartsByCid, updateCartsByCid } from '../assets/net/NetUtils';
import { ElMessage } from 'element-plus';
import router from '../router';
import { userInfoStore } from '../assets/userStore/userStore';

let count = ref()
let price = ref()
const userStore = userInfoStore()
const model = defineModel();
const props = defineProps({
    carts: {
        type: Object
    }
});

const handleChange = (value: number) => {
    count.value = value;
    price.value = value * props.carts!.commodity.price
    updateCartsByCid(props.carts!.cid, count.value, price.value)
        .then((value) => {
            if (value.code === 200) {
                ElMessage.success(value.data);
            } else {
                ElMessage.error(value.data);
            }
        })
}
const remove = (cid: number) => {
    removeCartsByCid(cid)
        .then(() => {
            queryAllCartsByUid(userStore.uid)
                .then((value) => {
                    model.value = value.data
                })
        })
}
const order = () => {
    router.push({
        path: "/order",
        query: {
            gid: props.carts!.commodity.gid,
            cid: props.carts!.cid,
            way: 0
        }
    })
}

onMounted(() => {
    count.value = props.carts!.count;
    price.value = props.carts!.price;
})
</script>

<template>
    <el-card shadow="hover">
        <el-row justify="center" align="middle">
            <el-col :span="3">
                <el-image :src="`/api/image/${carts!.commodity.image?.url}`" style="width: 100%;border-radius: 50px;" />
            </el-col>
            <el-col :span="12" style="margin-left: 3%;">
                <el-row>
                    <el-col :span="24">
                        <el-text style="font-size: large;">{{ carts!.commodity.commodityName }}</el-text>
                    </el-col>
                    <el-col :span="24" style="margin-top: 1%;margin-bottom: 2%;">
                        <el-text style="color: gray;font-size: small;">{{ carts!.commodity.description
                            }}</el-text>
                    </el-col>
                    <el-col :span="24">
                        <el-input-number v-model="count" :min="0" @change="handleChange" size="small" />
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="4" style="margin-left: 1%;">
                <el-text style="width: 100%;text-align: end;color: red;font-size: larger;">¥ {{ price
                    }}</el-text>
            </el-col>
            <el-col :span="4">
                <el-row>
                    <el-col :span="24">
                        <el-button type="danger" plain style="width: 100%;padding: 3%;"
                            @click="remove(carts?.cid)">删除商品</el-button>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10%;">
                        <el-button type="success" plain style="width: 100%;padding: 3%;" @click="order">提交订单</el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-card>
</template>